<!--登录页-->
<template>
  <div class="login">
    <div class="login-banner"></div>
    <div class="login-content">
      <h3>欢迎登录</h3>
      <h4>智慧档案管理系统平台</h4>
      <a-form
        :form="loginForm"
        @submit="handleSubmit">
        <a-form-item>
          <a-input placeholder="请输入用户名" v-decorator="['U_Name',{rules: [{ required: true, message: '请输入用户名' }], validateTrigger: 'blur'}]">
            <a-icon slot="prefix" type="user" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input-password placeholder="请输入密码" v-decorator="['U_PWD',{rules: [{required: true, message: '请输入密码'}], validateTrigger: 'blur'}]">
            <a-icon slot="prefix" type="lock" />
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" block :loading="loading">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import md5 from 'md5'
export default {
  name: 'Login',
  components: {},
  data () {
    return {
      loginForm: this.$form.createForm(this),
      loading: false,
      redirect: null
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
        }
      },
      immediate: true
    }
  },
  created () {},
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.loginForm.validateFields((err, values) => {
        if (!err) {
          values.U_PWD = md5(values.U_PWD)
          this.$vueAjax.login(values).then(res => {
            if (res.Mark) {
              // 登陆成功
              sessionStorage.setItem('ACCESS_TOKEN', res.Token)
              sessionStorage.setItem('USER_NAME', values.U_Name)
              this.loading = true
              setTimeout(() => {
                this.$router.push({ path: this.redirect || '/' })
                this.loading = false
              }, 1000)
            } else {
              this.$message.error('账号或密码错误!')
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  position: relative;
  .login-banner {
    width: 100%;
    height: 100%;
    background: url(../../assets/images/banner.png) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
  }
  .login-content {
    position: absolute;
    width: 400px;
    left: 15%;
    top: 50%;
    transform: translate(0, -50%);
    padding-left: 60px;
    h3 {
      color: rgba(0, 0, 0, 0.85);
      font-size: 28px;
      font-weight: bold;
    }
    h4 {
      color: rgba(0, 0, 0, 0.65);
      font-size: 20px;
      font-weight: bold;
    }
    .ant-form {
      .ant-form-item {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
